<template>
  <div>
    <div id="mescrollContainer">
      <div class="wrapper" ref="contentWrapper">

        <ticketList :dataList="dataList"></ticketList>

      </div>
    </div>

  </div>
</template>

<script>
import ticketList from "../ticketList/ticketList";
import noData from "../noData/noData";
import vConsole from "vConsole";

let swit = true; //变更开关
let useFlag = true;
if (swit) {
  // 测试接口
  var reqPathUrl = "https://xcxdev.bmac.com.cn/";
  var reqThemeUrl = "http://211.145.51.149:8081/bmac/api/theme/getCardInfo";
} else {
  // 生产接口
  var reqPathUrl = "https://xcxdev.bmac.com.cn/";
  var reqThemeUrl = "http://211.145.51.149:8081/bmac/api/theme/getCardInfo";
}

import { Base64 } from "js-base64";
import md5 from "js-md5";

// 定义域名端口号常量
// const reqPath = 'https://211.145.51.149:8082/'
export default {
  data() {
    return {
      scrollY: 0, //
      onlineFlag: true,
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 1, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata"></p>',
        noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        //这就是为什么无更多数据有时候不显示的原因
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "mescrollContainer", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "", //图标,默认null,支持网络图
          tip: "暂无数据", //提示
        },
      },
      listData: [],
      dataList: [], // 列表数据
    };
  },
  mounted() {
    setTimeout(() => {
      this.getOnlineStatus();
      this.initVconsole();
      console.log("sss22222");
    }, 300);
  },
  methods: {
    //初始化vconsole
    initVconsole() {
      BmacJSBridge.call("obtainClientBaseUrl", {}, (urlList) => {
        console.log("根据客户端传递环境控制vconsole");
        console.log(urlList);
        if (urlList.isProd == 0) {
          var vConsolemm = new vConsole();
        }
      });
    },
    addLineListener() {
      window.addEventListener("offline", function (e) {
        this.onlineFlag = false;
      });
      window.addEventListener("online", function (e) {
        this.onlineFlag = true;
      });
    },
    getOnlineStatus() {
      if (navigator.onLine) {
        this.onlineFlag = true;
      } else {
        this.onlineFlag = false;
      }
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      if (page.num == 1) {
        this.dataList = [];
      }
      console.log((page.num - 1) * page.size);
      console.log(page.size * page.num);
      var arr = this.listData.slice(
        (page.num - 1) * page.size,
        page.size * page.num
      );
      this.dataList = this.dataList.concat(arr);
      console.log(this.dataList, '--------11111111111111155111');
      this.$nextTick(() => {
        mescroll.endSuccess(arr.length);
      });
    },
  },
  components: {
    ticketList,
    noData,
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../common/stylus/mixin.styl';

html, body {
  overflow-x: hidden;
}

#mescrollContainer {
  -webkit-overflow-scrolling: touch;
}

/* 通过fixed固定mescroll的高度 */
.mescroll {
  overflow-x: hidden;
  position: fixed;
}

top 0 {
  bottom: 0;
  height: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 0;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
</style>
